<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
			<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
			<script type="text/javascript">
			document.write('<script src="../../js/fix.js?rd=?rd=' + Math.random() + '"><\/script>');
			</script>
		<script type="text/javascript">
			link(['../../css/mui.indexedlist.css','../../css/normalize.min.css']);
		</script>
		<script type="text/javascript">
			script(['../../js/mui.indexedlist2.js','../../js/PinYinUti.js']);
		</script>
		<style type="text/css">
		html,
	body {
		height: 100% !important;
		overflow: hidden;
	}
	.mui-bar {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	#done.mui-disabled{
		color: gray;
	}
		#users li{
			display: flex;
			align-items: center;
			
		}
		#users img{
			height: 0.4rem;
			width: 0.4rem;
			margin-right: 0.15rem;
		}

		.line {
		    display: inline-block;
		    width: 0.15rem;
		    height: 0.15rem;
		    border-radius: 15px;
		    background-color: #4b9cdb;
		}
		
		.ring-1 {
		    width: 0.1rem;
		    height: 0.1rem;
		    margin: 0 auto;
		    padding: 0.1rem;
		    border: 0.07rem dashed #4b9cdb;
		    border-radius: 100%;
		}
		
	
		
		.ball-holder {
		    position: absolute;
		    width: 0.12rem;
		    height: 0.45rem;
		    left: 0.17rem;
		    top: 0px;
		}
		.load-1 .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite;}
		.load-1 .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite;}
		.load-1 .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite;}

		
		@keyframes loadingA {
		    0 {height: 0.15rem;}
		    50% {height: 0.35rem;}
		    100% {height: 0.15rem;}
		}
		#loading,#loading2{
			margin: 0 auto;
			position: absolute;
			z-index: 1;
			top: 50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
		
		</style>
	</head>

	<body>
			<div class="mui-content">
				 <div id="loading" class="load-wrapp">
			    <div class="load-1">
			        <p>Loading...</p>
			        <div class="line"></div>
			        <div class="line"></div>
			        <div class="line"></div>
			    </div>
			</div>
				 <div id="loading2" style="display: none;" class="load-wrapp">
					 <p style="font-size: 0.18rem;">还没有导入客户</p>
			         
			</div>
			<div id='list' style="height: 100%;" class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" style="display: none;" placeholder="搜索客户">
			</div>
			<div class="mui-indexed-list-bar">
				<a>A</a>
				<a>B</a>
				<a>C</a>
				<a>D</a>
				<a>E</a>
				<a>F</a>
				<a>G</a>
				<a>H</a>
				<a>I</a>
				<a>J</a>
				<a>K</a>
				<a>L</a>
				<a>M</a>
				<a>N</a>
				<a>O</a>
				<a>P</a>
				<a>Q</a>
				<a>R</a>
				<a>S</a>
				<a>T</a>
				<a>U</a>
				<a>V</a>
				<a>W</a>
				<a>X</a>
				<a>Y</a>
				<a>Z</a>
			</div>
					<div class="mui-indexed-list-alert"></div>
						<div class="mui-indexed-list-inner">
					
						<!-- <div class="mui-indexed-list-empty-alert">没有数据</div> -->
						<ul id="users" class="mui-table-view" style="display: none;">
							<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
							<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
							<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
							<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
							<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
							<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
							<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
							<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
							<li data-group="I" class="mui-table-view-divider mui-indexed-list-group">I</li>
							<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
							<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
							<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
							<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
							<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
							<li data-group="O" class="mui-table-view-divider mui-indexed-list-group">O</li>
							<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
							<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
							<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
							<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
							<li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
							<li data-group="U" class="mui-table-view-divider mui-indexed-list-group">U</li>
							<li data-group="V" class="mui-table-view-divider mui-indexed-list-group">V</li>
							<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
							<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
							<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
							<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
						</ul>
					</div>
				</div>
				</div>
				<script src="../../js/app/TweenMax.min.js"></script>
		<script type="text/javascript">
					mui.init(); 
					 mui.plusReady(function () {
						 	storage.init();
						 storageUser = kidstorageuser.getInstance();
						 // localStorage.removeItem('customerData');
			            let datajson=localStorage.getItem("customerData");
						if(datajson!="" &&  datajson!=null && datajson!=undefined){
								setDataHtml(JSON.parse(datajson).DATASET);
						}else{
					
			request("/cmdb/queryByCustomerID/",{sales_id:storageUser.UId,cust_id:" "},function(request) {
				// alert(JSON.stringify(request));
				console.log(storageUser.UId);
						var data=request;
						if(request[SysConstants.DATASET_KEY].length == 0){
							// mui.toast("您还没有客户，请先导入客户");
						// openNew("../customer/customer_none_data.html");
						document.getElementById("loading").style.display="none";
						document.getElementById("loading2").style.display="block";
					} else {
						localStorage.setItem("customerData",JSON.stringify(data));
						setDataHtml(data.DATASET);
					}
				})
					}
				var list = document.getElementById('list');
				list.style.height = (document.body.offsetHeight) + 'px';
					window.indexedList = new mui.IndexedList(list);
	
			})
				function setDataHtml(data){
									//每次加载把之前加载的数据清除
				$(".mui-table-view .mui-indexed-list-group").nextAll().not(".mui-indexed-list-group").remove();
							var name;
							 var number;
							for(var i=0;i<data.length;i++){
							   if(data[i].src=="0"){
								   number=data[i].phone_no;
							   }else {
								   number=data[i].wechat_no;
							   }
							 	  let wname;
							 if(data[i].src=="0"){
							 	wname=data[i].phone_nm;
							 }else if(data[i].wechat_memo=="" || data[i].wechat_memo==null){
							 	wname=data[i].wechat_nm;
							 }else {
							 	wname=data[i].wechat_memo;
							 }
			            	   var pinyin=ConvertPinyin(wname).substring(0, 1);
			            	   //循环字母列表
							   let imgSex="";
							   if(data[i].sex=="F"){
								   imgSex="../../images/mrtxF.jpg";
							   }else{
								   imgSex="../../images/mrtxM.jpg";
							   }
							   var html='<li class="mui-table-view-cell mui-indexed-list-item" onclick="insertCustomer(\''+data[i].cust_id+'\',\''+wname+'\',\''+data[i].wechat_img+'\',\''+imgSex+'\')"><img src="'+imgSex+'" ><span style="display:inline-block;text-align:left;margin-right:0.24rem;margin-left:0.16rem;width:40%;">'+wname+'</span><span>'+number+'</span></li>'
			            	   $(".mui-table-view .mui-indexed-list-group").each(function(){
			            		   if($(this).html()==pinyin){
			            			   $(this).after(html);
									   document.getElementById("loading").style.display="none";
									   document.getElementById("users").style.display="block";
			            		   }
			            	   })
							   
			}
			//将后面没有值得字母列表隐藏
			$(".mui-table-view .mui-indexed-list-group").each(function(){
			            	   if($(this).next().hasClass("mui-indexed-list-group")){
			            		   $(this).remove();
			            	   }
			})
		}
			function insertCustomer(cusid,wname,imgurl,imgSex){
				  let img=imgSex;
				  if(imgurl!="null" && imgurl!="" && imgurl!="undefined"  && imgurl!=undefined){
					  img=imgurl;
				  }
				 programmePage = plus.webview.getWebviewById('programme');//获取智能笔记页面
				mui.fire(programmePage, 'insertCustomer', {  //自定义事件
					cusid: cusid,  
					name:wname,
					img:img
				});  
				mui.back();//返回智能笔记页面
			}
	// var 
	//   select = function(s) {
	//     return document.querySelector(s);
	//   },
	//   selectAll = function(s) {
	//     return document.querySelectorAll(s);
	//   }, 
	//     mark = select('.mark'),
	//     num = 18,
	//     step = 360/num,
	//     container1 = select('.container1'),
	//     container2 = select('.container2'),
	//     mainTl,
	//     count = 0
	//   
	// 
	// TweenMax.set('svg', {
	//   visibility: 'visible'
	// })
	// 
	// 
	// mainTl = new TimelineMax({});
	// 
	// 
	// 
	// function makeDial(container, radius, alpha){
	//  var angle, clone, point, tl, cloneLabel;
	//  
	//  for(var i = 0; i < num; i++){
	//   angle = step * i;
	//   clone = mark.cloneNode(true);
	//   container.appendChild(clone);
	//   point = {
	//     x: (Math.cos(angle * Math.PI / 180) * radius) + 400,
	//     y: (Math.sin(angle * Math.PI / 180) * radius) + 300
	//   } 
	//   TweenMax.set(clone, {
	//    x:point.x,
	//    y:point.y,
	//    rotation: angle,
	//    alpha:alpha
	//   })
	//   
	//   tl = new TimelineMax({repeat:-1});
	//   tl.to(clone, 1, {
	//    attr:{
	//     x2:60
	//    },
	//    ease:Power3.easeInOut
	//   })
	// .to(clone, 2, {
	//    attr:{
	//     x1:80,
	//     x2:80
	//    },
	//    ease:Power1.easeInOut
	//   })
	// 
	//   mainTl.add(tl, count/10)
	//   count++;
	//  }
	// 
	// }
	// 
	// makeDial(container1, 33, 0.3)
	// makeDial(container2, 33, 1)
	// 
	// TweenMax.set([container2, container1], {
	//  transformOrigin:'50% 50%'
	// })
	// 
	// 
	// mainTl.timeScale(2)
		</script>
	</body>

</html>
